<template>
    <div class="flow enable">
    	<flow-header
        :onClickOpen="options.onClickOpen || null"
        :onClickSave="options.onClickSave || null">
        <span slot="title">{{title}}</span>
        <input slot="ipt" type="text" maxlength="20" v-model="titleVal" @mousedown.stop="()=>{return false}"/>
        <div slot="lineType" :class="lineType">
  				<b :class="`ico_${lineType}`" @mousedown="setLineType"></b>
  			</div>
      </flow-header>
    	<flow-aside :tools="options.tools"/>
    	<flow-section
        :title="title"
        :lineType="lineType"
        :initFlowData="initFlowData"
        :onRemoveNode="options.onRemoveNode || null"
        :onSettingNode="options.onSettingNode || null"
        :onDblclick="options.onDblclick || function(){}"
        :onAddNode="options.onAddNode || function(){}"
        :onAddLine="options.onAddLine || function(){}"/>
    	<flow-footer :footer="options.footer"/>
    	<flow-message/>
    </div>
</template>

<script>
  import Vue from 'vue'
  import './css/icons.css'
  import FlowHeader from './FlowHeader'
  import FlowAside from './FlowAside'
  import FlowSection from './FlowSection'
  import FlowFooter from './FlowFooter'
  import FlowMessage from './FlowMessage'

  export default {
    name: 'FlowMain',
    props: ['options'],
    data() {
      return {
        lineType: '',
        title: ''
      }
    },
    computed: {
      titleVal: {
        get() {
          return this.title;
        },
        set(val) {
          this.setTitle(val);
        }
      }
    },
    methods: {
      setTitle(title) {
        this.title = title;
      },
      setLineType() {
        this.lineType = this.lineType ==='polyline' ? 'line': 'polyline';
      },
      initFlowData(data) {
        if(data) {
          this.lineType = data.lineType;
          this.title = data.title;
        }
        else {
          this.lineType = this.options.lineType || 'line';
          this.title = this.options.title || '流程图';
        }
      }
    },
    mounted() {
      this.initFlowData();
    },
    components: {
      FlowHeader,
      FlowAside,
      FlowSection,
      FlowFooter,
      FlowMessage
    },
    beforeCreate() {
      let getComponent = (key) => {
        return this.$children.filter(child => child.$options.name === key)[0];
      }
      Vue.prototype.$flow = this;      
      let setTitle = (title) => {
        this.setTitle(title);
      }
      let setLineType = () => {
        this.setLineType();
      }
      let loadData = (data) => {
        getComponent('FlowSection').loadFlowData(data);
      }
      let setMessage = (msg, time) => {
        getComponent('FlowMessage').setMessage(msg, time);
      }
      Vue.prototype = Object.assign(
        Vue.prototype,
        {loadData, setMessage, setTitle, setLineType}
      );
    }
  }
</script>

<style scoped>  
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .flow {
    background-color: #d2e1f0;
    border: #99bbe8 1px solid;
    border-radius: 3px;
    height: 100%;
    box-sizing:border-box;
    position: relative;
    min-width: 850px;
    min-height: 550px;
    box-shadow: 3px 3px 3px #888888;
  }
</style>